<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_ng中的过滤器</title>
    <script src="../lib/angularjs.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <h4>1、货币过滤器：currency</h4>
    <div>{{cur|currency: '#':3}}</div>
    <div>{{cur|currency: '&':4}}</div>
    <h4>2、数值过滤器：number</h4>
    <div>{{cur|number:1}}</div>
    <h4>3、字符串过滤器：lowercase和uppercase</h4>
    <div>{{str|lowercase}}</div>
    <div>{{str|uppercase}}</div>
    <div>{{str|uppercase|lowercase}}</div>
    <h4>4、字符串截取过滤器：limitTo</h4>
    <div>{{text|limitTo:3}}</div>
    <div>{{text|limitTo:6:9}}</div>
    <h4>5、日期过滤器：date</h4>
    <div>{{dateObj|date: "yyyy年MMMMdd日 HH时mm分ss秒"}}</div>
    <div>{{timestamp|date: "yyyy年MM月d日 hh时m分s秒"}}</div>
    <h4>6、排序过滤器：orderBy</h4>
    <div>{{arr|orderBy:"id":true}}</div>
    <h4>7、排序过滤器：filter</h4>
    <div>{{arr|filter:"beij"}}</div>
    <div>{{arr|filter:"shang":true}}</div>
</body>

<script>
    const myApp = angular.module("myApp", [])
    myApp.controller("myCtrl", ["$scope", function ($scope) {
        $scope.cur = "123.456";
        $scope.str = "Guang Dong Sheng";
        $scope.text = "AngularJS从入门到精通";
        $scope.dateObj = new Date()
        $scope.timestamp = new Date().getTime()
        $scope.arr = [{ city: "guangzhou", id: 1, place: "nan" }, { city: "beijing", id: 2, place: "bei" }, { city: "shanghai", id: 3, place: "dong" }]
    }])
</script>

</html>